<template>
  <div class="overviewMain">
     <div>
       <div class="title">
         <div class="text">
            {{title}}
         </div>
       </div>
       <div class="content">
         {{content}}
       </div>
     </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      dataChunk:{},
      title: '',
      content: ''
    };
  },
  created() {},
  mounted() {

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.overviewMain {
  margin: 0.2rem;
  height: 100%;
  div {
    width: 100%;
    height: 100%;
    .title {
      width: 1.94rem;
      height: 0.56rem;
      background-image: url("../assets/title_bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .text {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.3rem;
        color: #6e574b;
      }
    }
    .content {
      margin-top: 0.2rem;
      font-size: 0.24rem;
      color: #767676;
      text-indent: 2em;
      img{
        display: block;
        margin-top: 0.14rem !important;
        margin-bottom: 0.2rem !important;
        width: 6.89rem;
        height: auto;
      }
    }
  }
}
</style>
